﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <!--script src="Scripts/orgchart.js" type="text/javascript"></script-->
    <script src="Scripts/orgchart.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var orgchart = new OrgChart('chart');
            Utility.ImageDimen = { width: 70, height: 70 };
            orgchart.Push(new Cube(1, 0, { n: "1", c: 'blue', i: { src: 'images/a.jpg', text: ['Steve (alias)', 'CEO', '425-666-9999']} }));
            orgchart.Push(new Cube(2, 1, { n: "2", c: 'red', i: { src: 'images/b.jpg', text: ['Bill (alias)', 'President', '425-666-8888']} }));
            orgchart.Push(new Cube(4, 2, { n: "3", c: 'blue', i: { src: 'images/c.jpg', text: ['James (alias)', 'CVP', '425-666-7777']} }));
            orgchart.Push(new Cube(3, 2, { n: "4", c: 'blue', i: { src: 'images/d.jpg', text: ['Shawn (alias)', 'SVP', '425-666-6666']} }));
            orgchart.Push(new Cube(5, 2, { n: "5", c: 'blue', i: { src: 'images/e.jpg', text: ['Jay (alias)', 'VP', '425-666-3333']} }));
            orgchart.Push(new Cube(6, 4, { n: "6", c: 'blue', i: { src: 'images/f.jpg'} }));
            orgchart.NodeClick = function (id) {
                alert('click:' + id);
            };
            orgchart.NodeSearch = function (id) {
                alert('search:' + id);
            };
            orgchart.Draw();
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to orgplot!
    </h2>
    <p>
        <font color='green'>Here is the source code of below chart:</font>
        <pre>
            $(document).ready(function () {
                var orgchart = new OrgChart('chart');
                orgchart.Push(new Cube(1, 0, "root nextline maximum text size sit how can I help?", 'red'));
                orgchart.Push(new Cube(2, 1, "cube 2", 'blue'));
                orgchart.Push(new Cube(3, 1, "cube beautiful", 'blue'));
                orgchart.Push(new Cube(4, 1, "cube 2", 'blue'));
                orgchart.Push(new Cube(5, 1, "cube beautiful", 'blue'));
                orgchart.Push(new Cube(6, 1, "cube 2", 'blue'));
                orgchart.Push(new Cube(7, 1, "cube beautiful", 'blue'));
                orgchart.Push(new Cube(8, 1, "cube 2", 'blue'));
                orgchart.Push(new Cube(9, 2, "cube beautiful", 'green'));
                orgchart.Push(new Cube(10, 2, "igroup discussion", 'green'));
                orgchart.Draw();
                orgchart.NodeClick = function (id) {
                    alert(id);
                };
            });
        </pre>
    </p>
    <p>
        You can also find <a href="http://orgplot.codeplex.com" title="Org Chart libirary for HTML5">
            documentation on codeplex.com</a>.
    </p>
    <br />
    Example:<br />
    <!--style="background:pink"-->
    <canvas id="chart" width="800" height="600" />
</asp:Content>
